<template>
<div>
     <el-table
        :data="tableData"
    style="width: 100%">
    <el-table-column
      label="用户名"
      prop="username">
    </el-table-column>

      <el-table-column
      label="手机号"
      prop="tel">
    </el-table-column>
      <el-table-column
      style="color=red"
      label="校园认证"
      prop="schToken">
    </el-table-column>
    <el-table-column
      label="账号状态"
      prop="isdelete">
    </el-table-column>

    <el-table-column
      align="right">
      <template slot-scope="scope">
        <el-button v-show="banUser(scope.row)"
          size="mini"
          type="danger"
          @click="MbanUser(scope.$index, scope.row)">封禁</el-button>
        <el-button
          v-show="!banUser(scope.row)"
          size="mini"
           type="warning"
          @click="MunDo(scope.$index, scope.row)">解封</el-button>
          &nbsp;&nbsp;
             <el-button

          size="mini"
           type="info"
          @click="MDelUser(scope.$index, scope.row)">注销</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import { MgetUsers, MbanUser, MunDo, MDelUser } from '../../API/manager.js'
export default {
  data () {
    return {
      tableData: [],

      isDelete: true
    }
  },
  methods: {
    // 显示封禁按钮
    banUser (row) {
      if (row.isdelete === '✔') {
        return true
      } else {
        return false
      }
    },
    // 获取用户信息
    async getUsers () {
      const { data: res } = await MgetUsers()
      if (res.status === 0) {
        this.tableData = res.results
        this.tableData.map((item, index, arr) => {
          if (item.schToken === 0) {
            item.schToken = '✔'
          } else {
            item.schToken = '未认证'
          }
          if (item.isdelete === 0) {
            item.isdelete = '✔'
          } else {
            item.isdelete = '封号'
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }
    },
    // 封禁用户
    async MbanUser (index, row) {
      const { data: res } = await MbanUser({ id: row.id })
      if (res.status === 0) {
        this.tableData.map((item) => {
          if (item.id === row.id) {
            item.isdelete = '封号'
            this.$message({
              type: 'success',
              message: res.message
            })
          }
        })
      }
      this.isDelete = false
    },
    // 解封用户
    async MunDo (index, row) {
      const { data: res } = await MunDo({ id: row.id })
      if (res.status === 0) {
        this.tableData.map((item) => {
          if (item.id === row.id) {
            console.log(item.id + '----' + row.id)
            item.isdelete = '✔'
            this.$message({
              type: 'success',
              message: res.message
            })
          }
        })
      }
    },
    // 删除用户
    async MDelUser (index, row) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await MDelUser({ id: row.id })

        if (res.status === 0) {
          this.tableData.map((item, index) => {
            if (item.id === row.id) {
              this.tableData.splice(index, 1)
              this.$message({
                showClose: true,
                type: 'success',
                message: '注销成功'
              })
            }
          })
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getUsers()
  }

}
</script>

<style lang="less" scoped>

/deep/ .has-gutter tr td{
    text-align: center;

 }

    /deep/  .el-button+.el-button {
      margin-left: 0 !important;
    }

</style>
